<template>
  <n-grid cols="1" responsive="screen" class="-mt-4">
    <n-grid-item>
      <n-list>
        <n-list-item>
          <template #suffix>
            <n-button-group>
              <n-button type="primary" @click="activate('right')" text> 修改 </n-button>
            </n-button-group>
          </template>
          <n-thing title="账户密码">
            <template #description
              ><span class="text-gray-400">绑定手机和邮箱，并设置密码，帐号更安全</span></template
            >
          </n-thing>
        </n-list-item>
        <n-list-item>
          <template #suffix>
            <n-button type="primary" text>修改</n-button>
          </template>
          <n-thing title="绑定手机">
            <template #description
              ><span class="text-gray-400">已绑定手机号：+86189****4877</span></template
            >
          </n-thing>
        </n-list-item>
        <n-list-item>
          <template #suffix>
            <n-button type="primary" text>设置</n-button>
          </template>
          <n-thing title="密保问题">
            <template #description
              ><span class="text-gray-400"
                >未设置密保问题，密保问题可有效保护账户安全</span
              ></template
            >
          </n-thing>
        </n-list-item>
        <n-list-item>
          <template #suffix>
            <n-button type="primary" text>修改</n-button>
          </template>
          <n-thing title="个性域名">
            <template #description
              ><span class="text-gray-400">已绑定域名：https://www.naiveui.com</span></template
            >
          </n-thing>
        </n-list-item>
      </n-list>
    </n-grid-item>
  </n-grid>
  <n-drawer v-model:show="active" :default-width="502" :placement="placement" resizable>
    <n-drawer-content title="修改密码">
      <n-space vertical>
        <n-form
          ref="formRef"
          :rules="rules"
          label-placement="left"
          :model="formValue"
          require-mark-placement="right-hanging"
          label-width="6rem"
          :style="{
            maxWidth: '24rem',
          }"
        >
          <n-form-item label="旧密码" path="oldPassword">
            <n-input v-model:value="formValue.oldPassword" placeholder="请输入旧密码" />
          </n-form-item>
          <n-form-item label="新密码" path="password">
            <n-input v-model:value="formValue.password" placeholder="请输入新密码" />
          </n-form-item>
          <n-button type="success" @click="put(), (active = false)"> 确定 </n-button>
          <n-button type="tertiary" @click="active = false"> 取消 </n-button>
        </n-form>
      </n-space>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { DrawerPlacement, FormInst } from 'naive-ui';
  import { putUsera } from '@/api/system/user';

  const activeRef = ref(false);
  const placementRef = ref<DrawerPlacement>('right');
  const activate = (place: DrawerPlacement) => {
    activeRef.value = true;
    placementRef.value = place;
  };
  const active = activeRef,
    placement = placementRef;

  // 表单
  const formRef = ref<FormInst | null>(null);
  const formValue: {
      oldPassword: string;
      password: string;
    } = reactive({
      oldPassword: '',
      password: '',
    }),
    rules = {
      oldPassword: [
        {
          required: true,
          message: '请输入旧密码',
          trigger: ['input', 'blur'],
        },
        {
          min: 6,
          max: 20,
          message: '长度在 6 到 20 个字符',
          trigger: 'blur',
        },
      ],
      password: [
        {
          required: true,
          message: '请输入新密码',
          trigger: ['input', 'blur'],
        },
        {
          min: 6,
          max: 20,
          message: '长度在 6 到 20 个字符',
          trigger: 'blur',
        },
      ],
    };
  const put = async () => {
    await putUsera(formValue);
  };
</script>
